.login-modal {
  :global {
    .ant-modal-close {
      @apply hover:bg-none;
    }

    .ant-modal-content {
      @apply pt-12 !bg-white;
    }

    .login-modal-container {
      @apply bg-white w-[650px] h-[415px] relative flex items-center;

      &_form {
        @apply absolute -top-[65px] h-[520px] w-[320px] bg-[#d3b7d8] shadow-[2_0_10px_rgba(0,0,0,0.1)] z-[2] flex flex-col items-center justify-center transform transition-all duration-500;

        .ant-form-item {
          @apply w-[70%];

          .ant-input,
          .ant-input-password {
            @apply bg-transparent text-white rounded-none border-transparent border-b-[rgba(255,255,255,0.4)] text-[14px] indent-[10px] px-0 shadow-none;

            &::placeholder {
              @apply text-white;
            }

            &:focus,
            &:focus-within {
              @apply text-[#a262ad] outline-0 border-transparent border-b-[#a262ad80];
            }
          }
        }

        .form_btn {
          @apply w-[70%] bg-[#f6f6f6] text-[#a262ad] rounded-[5px] p-3 cursor-pointer border-none;

          &:hover {
            @apply bg-[#a262ad] text-[#f6f6f6] border-[#a262ad] transition-[background-color] duration-300 ease-in;
          }
        }
      }

      &_wrap {
        @apply flex flex-1 flex-col items-center justify-center;

        .wrap_title {
          @apply text-[24px] text-center font-bold text-[#8e9aaf] mb-1;
        }

        .wrap_desc {
          @apply text-[12px] text-center font-bold text-[#8e9aaf];
        }

        .wrap_img {
          @apply w-[150px] h-[150px] my-10;
        }

        .wrap_btn {
          @apply px-[10px] py-[6px] mt-3 rounded-[5px] cursor-pointer bg-white text-[#a262ad] border-[1px] border-[#a262ad];

          &:hover {
            @apply bg-[#a262ad] text-white border-[#a262ad];
          }
        }

        .wrap_title_highlight {
          @apply text-[#d3b7d8];
        }
      }
    }
  }
}
